#layout-opened-tabs {
  display: flex;
  height: 48px;
  margin-top: 8px;
  margin-bottom: 0;
  margin-left: 48px;
  padding-top: 0;
  padding-bottom: 0;
  overflow: hidden;

  .ant-tabs-tabpane {
    display: none;
  }

  .ant-tabs-nav {
    position: relative;
    height: 44px;
    padding-right: 10px; // 给右边一点距离, 防止操作区域一直抖动

    .ant-tabs-tab {
      margin-bottom: 4px;
      background-color: inherit;
      border: none;
      //padding-left: 4px;

      .ant-tabs-tab-remove {
        padding-right: 0;
        padding-left: 0;
        visibility: hidden;
      }

      &:hover {
        .ant-tabs-tab-remove {
          visibility: visible;
        }

        &::after {
          position: absolute;
          bottom: -3px;
          left: 0;
          display: inherit;
          width: 90%;
          height: 3px;
          background: #2eabff;
          opacity: 1;
          content: '';
        }
      }

      &::after {
        position: absolute;
        bottom: -3px;
        left: 0;
        display: inherit;
        width: 0;
        height: 3px;
        opacity: 0;
        transition: width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
          opacity 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
        content: '';
      }

      &.ant-tabs-tab-active {
        &::after {
          position: absolute;
          bottom: -3px;
          left: 0;
          display: inherit;
          width: 90%;
          height: 3px;
          background: #1890ff;
          opacity: 1;
          content: '';
        }
      }
    }
  }

  .ant-tabs-bar {
    margin: 16px 0 0;
    border-bottom: none;
    outline: none;
    transition: padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  }

  .ant-tabs-tab {
    .ant-tabs-close-x {
      visibility: hidden;
    }
  }

  .ant-tabs-tab-active {
    .ant-tabs-close-x {
      visibility: visible;
    }
  }

  .ant-tabs-tab:hover {
    .ant-tabs-close-x {
      visibility: visible;
    }
  }
}
